<template>
  <img src="../assets/logo.png" style="height: 100px;position: relative;left: 10%;top:1.5%;height: 10%;">
  <div style="font-size: 30px;position: fixed;left:35%;top: 5%;">欢迎登录12306</div>
  <div class="mainBg">

    <el-card class="box-card">

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch="true">
        <div>
          <el-tab-pane label="账号登录" name="first">
            <el-form :model="sysUser" label-width="120px">
              <el-input v-model="sysUser.username" placeholder="用户名/邮箱/手机号" style="width: 99%;margin-bottom: 10px;" />
              <el-input type="password" v-model="sysUser.password" placeholder="密码"
                style="width: 99%;margin-bottom: 10px;" />
              <el-button type="primary" @click="ToLogin"
                style="width: 360px;background-color: orange;margin-bottom: 10px;">立即登录</el-button>
            </el-form>

            <div style="position: relative; left: 50px;">
              <el-button text style="color: #409EFF;" @click="ToRegister">注册12306账号</el-button> | <el-button text
                >忘记密码？</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="管理员登录" name="second">
            <el-form :model="sysUser2" label-width="120px">
              <el-input v-model="sysUser2.username" placeholder="用户名/邮箱/手机号" style="width: 99%;margin-bottom: 10px;" />
              <el-input type="password" v-model="sysUser2.password" placeholder="密码" style="width: 99%;margin-bottom: 10px;" />
              <el-button type="primary" @click="ToManager"
                style="width: 360px;background-color: orange;margin-bottom: 10px;">立即登录</el-button>
            </el-form>


          </el-tab-pane>
        </div>
      </el-tabs>

      <hr>
      <div style="font-size: 14px;">
        铁路12306每日5:00至次日1:00（周二为5:00至23:30）提供购票、改签、变更到站业务办理， 全天均可办理退票等其他服务。
      </div>
    </el-card>

  </div>
  <img src="../assets/foot.png" style="position: absolute;bottom: 0px;left: 0px;height: 16%;width: 100%;">
</template>


<script setup >
import { ref } from "vue";
// import axios from "axios";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";

import { useLoginStore } from '../stores/login'

// import { storeToRefs } from 'pinia'
import { ElMessage } from "element-plus";

const loginStore = useLoginStore()

// const { name } = storeToRefs(loginStore)


// import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}

const router = useRouter();
const route = useRoute();



let sysUser = ref({
  username: route.query.username,
  password: '',
});



let sysUser2 = ref({
  username: 'admin',
  password: '',
});

let ToLogin = () => {

  if (sysUser.value.username == '' || sysUser.value.username == null) {
    ElMessage.error('用户名不能为空')

  }

  else if (sysUser.value.password == '' || sysUser.value.password == null) {
    ElMessage.error('密码不能为空')

  }
  else {
    loginStore.login(sysUser.value).then((ret) => {
      if (ret == 1) {

        router.push("/main")
      }
    })
  }


}

let ToRegister = () => {
  sessionStorage.setItem('name','')
  router.push("/register")
}


let ToManager = () => {

  

  if (sysUser2.value.password == '' || sysUser2.value.password == null) {
    ElMessage.error('密码不能为空')

  }
  else{
    window.location.href = 'http://localhost:5773/welcome'
  }
 
}


// let ToForget = () => {
//   sessionStorage.setItem('name','')
//   router.push("/forget")
// }
// let doLogin = () => {
//   //表单验证
//   if (sysUser.value.userName == "") {
//     // alert("用户名称不能为空");
//     ElMessage.error("用户名称不能为空!");
//     return;
//   }
//   if (sysUser.value.userPassword == "") {
//     // alert("用户密码不能为空");
//     ElMessage.error("用户密码不能为空!");

//     return;
//   }

//   axios
//     .post("http://localhost:8080/crm/selectSysUserByNameByPass", sysUser.value)
//     .then((response) => {
//       console.log(response.data);
//       let sysUser = response.data;
//       if (sysUser == "") {
//         // alert("用户名称或密码输入错误！");
//         ElMessage.error("用户名称或密码输入错误！!");
//       } else {
//         //JSON.stringify(sysUser) 将对象转变为字符串
//         sessionStorage.setItem("sysUser", JSON.stringify(sysUser));
//         router.push("/index");
//       }
//     })
//     .catch((error) => {
//       console.log(error);
//     });
// };
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

.text {
  font-size: 14px;
}

.mainBg {
  height: 70%;
  position: fixed;
  width: 100%;
  top: 13%;
  background-size: cover;
  background-image: url("../assets/login.jpg");
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 400px;
  margin: 0 auto;

  margin-top: 120px;
  margin-right: 100px;
}

.el-input {
  width: 400px;
}
</style>